<template>
  <div class="staff">
    <div class="tools">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="联系方式：">
          <el-input v-model="formInline.staffPhone"></el-input>
        </el-form-item>
        <el-form-item label="姓名：">
          <el-input v-model="formInline.staffName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="primary" @click="resetForm">重置</el-button>
          <el-button type="primary" @click="ExportFile">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="add">
      <el-button type="primary" @click="add">+新增</el-button>
    </div>

    <div class="sheet">
      <el-table :data="tableData" hiddenstyle="width: 100%">
        <el-table-column prop="staffId" label="编号"></el-table-column>
        <el-table-column prop="staffPhone" label="联系方式"></el-table-column>
        <el-table-column prop="staffName" label="姓名"></el-table-column>
        <el-table-column prop="createDate" label="创建时间"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <span class="select" style="cursor:pointer">查询</span>
            <span @click="changeStatus(scope.row)">
              <span class="employ" style="cursor:pointer" v-if="scope.row.status == 0">启用</span>
              <span class="stop" style="cursor:pointer" v-else>禁用</span>
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[1, 2, 6, 10]"
        :page-size="10"
        layout="prev, pager, next,sizes, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <el-dialog title="添加新用户" :visible.sync="newlyincreased" width="30%" :before-close="consultClose">
      <el-form ref="formRef" :model="ruleForm" :rules="rules" label-width="80px">
        <el-form-item label="员工编号" prop="staffId" label-width="110px">
          <el-input v-model="ruleForm.staffId"></el-input>
        </el-form-item>
        <el-form-item label="员工姓名" prop="staffName" label-width="110px">
          <el-input v-model="ruleForm.staffName"></el-input>
        </el-form-item>
        <el-form-item label="员工联系方式" prop="staffPhone" label-width="110px">
          <el-input v-model="ruleForm.staffPhone"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="immediatelyAdd">立即添加</el-button>
          <el-button @click="consultClose">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getStaffManagement, deleteStaff, addStaffs, chanageStat, ExportFile } from '@/views/userHome/api/staff.js'
import { getItem } from '@/utils/store.js'

export default {
  data() {
    return {
      formInline: {},
      newlyincreased: false,
      currentPage4: 1,
      ruleForm: {},
      rules: {
        staffId: [{ required: true, message: '请输入员工编号', trigger: 'blur' }],
        staffName: [{ required: true, message: '请输入员工姓名', trigger: 'blur' }],
        staffPhone: [
          { required: true, message: '请输入员工联系方式', trigger: 'blur' },
          {
            validator: function(rule, value, callback) {
              if (/^1[34578]\d{9}$/.test(value) == false) {
                callback(new Error('请输入正确的手机号'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ]
      },
      tableData: [
        {
          staffId: '001',
          staffPhone: '13900000000',
          staffName: 'XXX',
          createDate: '2020-01-11 23:59:59',
          status: 0
        },
        {
          staffId: '001',
          staffPhone: '13900000000',
          staffName: 'XXX',
          createDate: '2020-01-11 23:59:59',
          status: 0
        },
        {
          staffId: '001',
          staffPhone: '13900000000',
          staffName: 'XXX',
          createDate: '2020-01-11 23:59:59',
          status: 0
        },
        {
          staffId: '001',
          staffPhone: '13900000000',
          staffName: 'XXX',
          createDate: '2020-01-11 23:59:59',
          status: 0
        },
        {
          staffId: '001',
          staffPhone: '13900000000',
          staffName: 'XXX',
          createDate: '2020-01-11 23:59:59',
          status: 0
        },
        {
          staffId: '001',
          staffPhone: '13900000000',
          staffName: 'XXX',
          createDate: '2020-01-11 23:59:59',
          status: 0
        },
        {
          staffId: '001',
          staffPhone: '13900000000',
          staffName: 'XXX',
          createDate: '2020-01-11 23:59:59',
          status: 0
        }
      ],
      total: 0
    }
  },
  created() {
    this.getStaffManagements()
  },
  methods: {
    async changeStatus(row) {
      console.log(row)
      let data = {}
      data.id = row.id
      if (row.status == 1) {
        data.status = 0
      } else {
        data.status = 1
      }
      const { data: res } = await chanageStat(data)
      console.log(res)
      this.getStaffManagements()
    },
    async getStaffManagements() {
      // 获取员工管理列表
      let companyId = getItem('USER_INFO').data.data.companyId
      this.formInline.companyId = companyId
      const { data: res } = await getStaffManagement(this.formInline)
      console.log(res)
      this.tableData = res.data.records
      this.total = res.data.total
    },
    ExportFile() {
      let companyId = getItem('USER_INFO').data.data.companyId
      this.formInline.companyId = companyId
      ExportFile('/account/staff/export', this.formInline)
    },
    add() {
      this.newlyincreased = true
    },
    immediatelyAdd() {
      //新增员工
      this.$refs.formRef.validate(async valid => {
        let that = this
        if (valid) {
          let id = getItem('XIE_XIN').user_id
          let companyId = getItem('USER_INFO').data.data.companyId
          that.ruleForm.userId = id
          that.ruleForm.companyId = companyId
          const { data: res } = await addStaffs(that.ruleForm)
          if (res.code == 0) {
            that.$message({
              type: 'success',
              offset: 200,
              message: res.msg
            })
            that.newlyincreased = false
            that.ruleForm={}
            that.getStaffManagements()
          } else {
            return this.$message({
              type: 'warning',
              offset: 200,
              message: res.msg
            })
          }
        } else {
          return this.$message({
            type: 'warning',
            offset: 200,
            message: `请根据条件填写信息`
          })
        }
      })
    },
    consultClose() {
      this.newlyincreased = false
      this.ruleForm={}
    },
    async deleteStaff(e) {
      //根据userid删除员工
      let id = e.userId
      console.log(e)
      const { data: res } = deleteStaff(id)
      console.log(res)
    },
    handleSizeChange(val) {
      this.formInline.size = val
      this.getStaffManagements()
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.formInline.current = val
      this.getStaffManagements()
      console.log(`当前页: ${val}`)
    },
    onSubmit() {
      this.getStaffManagements()
    },
    resetForm() {
      this.formInline = {}
      this.getStaffManagements()
    }
  }
}
</script>

<style lang="less" scope>
.sheet {
  margin: 25px 20px 0;
}

.add {
  margin-top: 25px;
}

.select {
  padding-right: 5px;
  color: rgb(24, 144, 255);
}
.employ {
  margin-left: 5px;
  color: rgb(24, 144, 255);
}
.stop {
  margin-left: 5px;
  color: rgb(255, 0, 0);
}

.block {
  margin: 25px 60px 10px;
}
</style>
